<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<title>系统公告列表</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="/resources/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="/resources/css/public.css" media="all" />
</head>
<body class="childrenBody">
	<blockquote class="layui-elem-quote quoteBox">
		<form class="layui-form" method="post" id="searchForm">
			<div class="layui-form-item" style="text-align: center;">
			    <div class="layui-inline">
			      <label class="layui-form-label">登录名称:</label>
			      <div class="layui-input-inline">
			        <input type="text" name="loginname"  placeholder="请输入登录名" autocomplete="off" class="layui-input">
			      </div>
			    </div>
			    <div class="layui-inline">
			      <label class="layui-form-label">开始时间:</label>
			      <div class="layui-input-inline">
			        <input type="text" name="startTime" placeholder="请选择开始时间" id="startTime" readonly="readonly"  autocomplete="off" class="layui-input">
			      </div>
			    </div>
			    <div class="layui-inline">
			      <label class="layui-form-label">结束时间:</label>
			      <div class="layui-input-inline">
			        <input type="text" name="endTime" placeholder="请选择结束时间" id="endTime" readonly="readonly"  autocomplete="off" class="layui-input">
			      </div>
			    </div>
			    <div class="layui-inline">
			      <button type="button" class="layui-btn" id="doSearch"><span class='layui-icon'>&#xe615;</span>搜索</button>
		          <button type="reset" class="layui-btn layui-btn-danger"><span class='layui-icon'>&#xe669;</span>重置</button>
			    </div>
		   </div>
		</form>
	</blockquote>
	
	<table id="loginfoTable" class="layui-table" lay-filter="loginfoTable"></table>
	
	<!--表头-->
	<div id="loginfoTableToolBar" style="display: none;">
		<a class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchdel"><span class="layui-icon">&#xe640;</span>批量删除</a>
	</div>
	<!--操作-->
	<div type="text/html" id="loginfoTableRowBar"  style="display: none;">
		<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del"><span class="layui-icon">&#xe640;</span>删除</a>
	</div>
	
	<script type="text/javascript" src="/resources/layui/layui.js"></script>
	<script type="text/javascript">
		layui.use(['table','form','layer','laydate','jquery'],function(){
			var table = layui.table;
			var form = layui.form;
			var layer = layui.layer;
			var laydate = layui.laydate;
			var $ = layui.jquery;
			
			//渲染时间选择器
			laydate.render({
				elem:'#startTime',
				type:'datetime'
			});
			laydate.render({
				elem:'#endTime',
				type:'datetime'
			});
			
			

			//渲染数据表格
			var tableIns = table.render({
				elem:'#loginfoTable',
				url:'/loginfo/loadAllLoginfo',
				toolbar:'#loginfoTableToolBar',//开启同工具栏
				defaultToolbar:['filter','print'],
				title:'日志数据表',
				height:'full-150',//固定高度
				cols:[ [
					{type:'checkbox',fixed:'left'},
					{field:'id',title:'ID',align:'center',fixed: 'left', unresize: true, sort: true},
					{field:'loginname',title:'登陆名称',align:'center'},
					{field:'loginip',title:'登陆IP',align:'center'},
					{field:'logintime',title:'登陆时间',align:'center'},
					{field:'right',title:'操作',toolbar:'#loginfoTableRowBar',align:'center'}
				] ],
				page:true
			});
			
			//模糊查询
			$("#doSearch").click(function(){
				//serialize()数据连接
				var params = $("#searchForm").serialize();
				//表格重新加载
				tableIns.reload({
					url:'/loginfo/loadAllLoginfo?'+params,
					page:{
				    	curr:1
				    }
				});
			});
			
			//监听表头按钮事件
			table.on('toolbar(loginfoTable)',function(obj){
				switch(obj.event){
					case 'batchdel':
						batchDelete(obj);						
						break;
				}
			});
			
			//==========批量删除=========
			function batchDelete(obj){
				var checkStatus = table.checkStatus('loginfoTable');//idTest 即为基础参数id 对应的值
				console.log(checkStatus.data);//获取选中行的数据
				console.log(checkStatus.data.length);//获取选中行数量，可作为是否有选中行的条件
				//console.log(checkStatus.isAll);//表格是否全选
				if(checkStatus.data.length == 0){
					layer.msg("请选中要删除的数据行");
				}else {
					layer.confirm('真的删除选中的行?',function(index){
						layer.close(index);
						var params = "";
						$.each(checkStatus.data,function(i,item){
							if(i == 0){
								params+="ids="+item.id;
							}else{
								params+="&ids="+item.id;
							}
						});
						console.log(params);
						//向服务器发送删除指令
						$.post("/loginfo/batchDeleteLoginfo",params,function(obj){
							if(obj.code==200){
								tableIns.reload();//重载表格
							}
							layer.msg(obj.msg);
						});
					});
				}
			}
				
			//监听行按钮的事件
			table.on('tool(loginfoTable)',function(obj){
				var data = obj.data;//获取当前行的数据
				var layEvent = obj.event;//获取lay-event 对应的值（也可以是表头的 event 参数对应的值）
				if(layEvent === 'del'){ //删除
					layer.confirm('真的删除行么',function(index){
						//obj.del();//删除对应行（tr）的DOM结构，并更新缓存
						layer.close(index);
						//向服务器发送删除指令
						$.post('/loginfo/deleteLoginfo',{id:data.id},function(obj){
							if(obj.code == 200){
								tableIns.reload();//重载表格
							}
							layer.msg(obj.msg);
						});
					});
				}
			})
			
		});
		
	</script>
	
</body>
</html>